<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
  import { createOrderApi, getAddressListApi, getMedicineOrderDetailApi } from '@/apis/medicine'
  import { orderPayApi } from '@/apis/user'
  import type { AddressItem, MedicineOrderDetail } from '@/types/medicineOrder'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const addressInfo = ref<AddressItem>()
  //支付组件
  const paymentRef = ref()
  //订单id
  const orderId = ref('')

  onLoad(async () => {
    const res = await getAddressListApi()
    addressInfo.value = res[0]
  })

  const orderDetail = ref<MedicineOrderDetail>()

  const props = defineProps<{
    id: string
  }>()

  onLoad(async () => {
    const res = await getMedicineOrderDetailApi(props.id)
    console.log(res)
    orderDetail.value = res
  })

  // 选择支付渠道
  const onPaymentButtonClick = async () => {
    if (orderId.value === '') {
      // 生成待支付订单接口
      const data = await createOrderApi(props.id, addressInfo.value!.id)
      // 传递订单ID
      orderId.value = data.id
    }
    paymentRef.value.open()
  }

  const onPaymentClose = async () => {
    const res = await uni.showModal({
      title: '温馨提示',
      content: '你确定放弃支付吗？',
      cancelText: '仍要关闭',
      cancelColor: '#848484',
      confirmText: '继续支付',
      confirmColor: '#16C2A3',
    })
    if (res.cancel) {
      // 关闭所有页面，去首页
      // uni.reLaunch({ url: '/pages/index/index' })
      paymentRef.value.close()
      uni.showToast({
        title: '支付已关闭',
        icon: 'none',
      })
    }
  }

  const onPaymentConfirm = async (index: number) => {
    if (index === 0) return uni.showToast({ title: '暂不支持微信支付!', icon: 'none' })
    // 调用后端提供的支付接口
    const data = await orderPayApi({
      orderId: orderId.value,
      paymentMethod: index,
      payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/pay_result',
    })
    // 支付宝支付页面
    window.location.href = data.payUrl
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment" v-if="addressInfo">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo?.province }} {{ addressInfo?.city }}
          </view>
          <view class="detail">{{ addressInfo?.addressDetail }}</view>
          <view class="receiver">{{ addressInfo?.receiver }} {{ addressInfo?.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderDetail?.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">用法用量：{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderDetail?.actualPayment}`" />
          <uni-list-item title="运费" :right-text="`¥${orderDetail?.expressFee}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderDetail?.couponDeduction}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${orderDetail?.actualPayment}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ orderDetail?.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
        </view>
      </view>
    </view>
  </scroll-page>
  <!-- 支付渠道 -->
  <custom-payment
    v-if="orderDetail?.actualPayment"
    @close="onPaymentClose"
    @confirm="onPaymentConfirm"
    :amount="orderDetail?.actualPayment"
    :order-id="orderId"
    ref="paymentRef"
  />
</template>

<style lang="scss">
  @import './payment.scss';
</style>
